<template>
  <div>
    <el-row :gutter="30">
      <el-col :span="24">
        <div style="margin-top:10px">
          <el-button icon="el-icon-plus" type="primary" size="mini" @click="addData">新增</el-button>
          <el-button icon="el-icon-close" type="danger" size="mini" @click="deleteAny" v-if="deleteAllMethod">删除</el-button>
        </div>
        <div class="query-form">
          <table-search-form :table-search-form-param="tableSearchFormParam"
                             @searchTableData="searchTableData"></table-search-form>
        </div>
        <br/>
        <tree-table :data="tableData" :evalFunc="func" :evalArgs="args" :expandAll="expandAll" :columns="treeColumns" border
                    v-on:listenToSelection="handleSelectionChange">
          <el-table-column
            v-for="item in tableColumns"
            :label=item.label
            :property=item.name
            :width=item.width>
          </el-table-column>
          <el-table-column label="操作" width="100" align="center" v-if="showType=='dropdown'">
            <template slot-scope="scope">
              <el-dropdown trigger="click" placement="bottom">
                <el-button plain>
                  操作<i class="el-icon-caret-bottom el-icon--right"/>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-button
                      size="small"
                      type="success"
                      icon="el-icon-edit"
                      @click="editData(scope.$index, scope.row)">编&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;辑
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item divided v-if="deleteSingleMethod">
                    <el-button
                      size="small"
                      type="danger"
                      icon="el-icon-close"
                      @click="deleteData(scope.$index, scope.row)">删&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;除
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item divided v-for="item in tableOperation">
                    <el-button
                      size="mini"
                      :type="item.type"
                      :icon="item.icon"
                      @click="tableMethod(scope.$index, scope.row,item.method)">{{item.title}}
                    </el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
          <el-table-column label="操作" :width="typeof(tableOperationWidth)==='undeifned'?'':tableOperationWidth" v-else>
            <template slot-scope="scope">
              <el-button
                size="small"
                type="success"
                icon="el-icon-edit"
                @click="editData(scope.$index, scope.row)">编辑
              </el-button>
              <el-button
                size="small"
                type="danger"
                icon="el-icon-close"
                v-if="deleteSingleMethod"
                @click="deleteData(scope.$index, scope.row)">删除
              </el-button>
              <el-button
                size="mini"
                v-for="item in tableOperation"
                :type="item.type"
                :icon="item.icon"
                @click="tableMethod(scope.$index, scope.row,item.method)">{{item.title}}
              </el-button>
            </template>
          </el-table-column>
        </tree-table>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=this.currentPage
            :page-sizes="[10, 20, 30, 40]"
            :page-size=this.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.total>
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss">
  .page {
    text-align: center;
    margin-top: 20px;
  }

  .query-form {
    border-bottom: 1px solid #ebeef5;
    padding-top: 25px;
  }
</style>

<script>
  import treeTable from '@/components/TreeTable'
  import treeToArray from './customEval'
  import TableSearchForm from '../../TableSearchForm'

  export default {
    name: 'LemonETreeTable',
    components: {treeTable, TableSearchForm},
    props: {
      listMethod: Function,
      getMethod: Function,
      deleteSingleMethod: Function,
      deleteAllMethod: Function,
      tableColumns: Array,
      treeColumns:Array,
      tableSearchFormParam: Object,
      tableOperation: Array,
      tableOperationWidth: String,
      showType: String
    },
    created() {

    },
    data() {
      return {
        func: treeToArray,
        expandAll: true,
        args: [null, null, null],
        tableLoading: true,
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        tableSearchParam: {},
        multipleSelection: []
      }
    },
    methods: {
      listTableData() {
        this.tableLoading = true
        this.listMethod(this.tableSearchParam, this.currentPage, this.pageSize, (res) => {
          this.tableData = res.list
          this.total = res.total
          this.tableLoading = false
        }, () => {

        })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.listTableData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.listTableData()
      },
      searchTableData(param) {
        this.tableSearchParam = param
        this.listTableData()
      },
      addData() {
        this.$emit('addData')
      },
      editData(index, row) {
        this.$emit('editData', row)
      },
      deleteData(index, row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteSingleMethod(row.id, (res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.listTableData()
          }, () => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      deleteAny() {
        if (this.multipleSelection.length == 0) {
          this.$message({
            type: 'warning',
            message: '请选择记录!'
          })
          return;
        }
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteAllMethod(this.multipleSelection, (res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.listTableData()
          }, () => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      handleSelectionChange(selection) {
        this.multipleSelection = selection
      },
      tableRowClick(row, event, column) {
        this.$emit('row', row)
      },
      tableMethod(index, row, method) {
        method(index, row)
      }
    }
  }
</script>
